import React, { PureComponent } from "react";
import { PageHeader, Button, Form, Input, Select, Upload, Modal } from "antd";
import { FileImageOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import "./index.scss";

import insxy  from "../../../../api/pzq/AddBanner";

const { Option } = Select;

//表单布局
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const routes = [
  {
    path: "index",
    breadcrumbName: "设置",
  },
  {
    path: "first",
    breadcrumbName: "Banner图管理",
  },
];

class AboutBanner extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      previewVisible: false,
      previewImage: "",
      fileList: [
        {
          uid: -1,
          name: "xxx.png",
          status: "done",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
      ],
    };
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  render() {
    console.log(this.props.routes);
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <FileImageOutlined />
        <div className="ant-upload-text">点击上传</div>
      </div>
    );

    //获取from表单的数据
    const submit = (value) => {
      insxy(value).then((res) => {
        console.log(res);
      });
    };

    return (
      <>
        <div className="Header">
          <PageHeader
            className="site-page-header"
            title="Banner图管理"
            breadcrumb={{
              routes,
            }}
          />
        </div>

        <div className="Content ">
          <div className="flex2">
            <div className="Content-left">
              <h3 className="Advertising-Banner-List">基础信息</h3>
            </div>
          </div>

          <Form
            {...layout}
            ref={this.formRef}
            name="control-ref"
            onFinish={submit}
          >
            <Form.Item
              name="imgNmae"
              label="Bannert图名称"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <div className="uploadImg">
              <div>
                <span className="message">Banner图:</span>
              </div>
              <div className="imges">
                <Upload
                  action="//jsonplaceholder.typicode.com/posts/"
                  listType="picture-card"
                  fileList={fileList}
                  onPreview={this.handlePreview}
                  onChange={this.handleChange}
                >
                  {fileList.length >= 3 ? null : uploadButton}
                </Upload>
                <Modal
                  visible={previewVisible}
                  footer={null}
                  onCancel={this.handleCancel}
                >
                  <img
                    alt="example"
                    style={{ width: "100%" }}
                    src={previewImage}
                  />
                </Modal>
              </div>
            </div>
            <Form.Item
              name="link"
              label="链接"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              name="sequence"
              label="排序号"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit" className="suiltBtn">
                提交
              </Button>

              <Button htmlType="button">
                <Link to={"/home/setting/banner"}>返回</Link>
              </Button>
            </Form.Item>
          </Form>
        </div>
      </>
    );
  }
  clickPike() {
    console.log(this.props.location);
  }
}

export default AboutBanner;
